<template>
	<view>
		<tabbar currentText="首页">
			<view class="top">
				<view class="top_main">
					<view class="top_name">{{user_info.deptName || '首页'}}</view>
					<view class="top_role" @click="role_status()">
						<view class="top_menu" v-if="role_show == 1 && user_info && user_info['role_list'].length == 2">
							<view class="triangle"></view>
							<view class="top_menu_bg">
								<view class="top_menu_text" style="border-bottom: 1rpx solid rgba(255,255,255,0.25);" @click="change_role('148')">销售经理</view>
								<view class="top_menu_text" @click="change_role('150')">销售顾问</view>
							</view>
						</view>
						<text v-if="this.user_info['role'] == '148'">销售经理</text>
						<text v-else>销售顾问</text>
						<image src="../../../static/images/index_change.png" v-if="user_info && user_info['role_list'].length == 2" />
					</view>
					<view class="clear"></view>
					<view class="table" @click="toForm">
						<text class="clue_title">线索数据</text>
						<view class="table_day">
							<text>近180天</text>
							<text>近30天</text>
							<text>近7天</text>
						</view>
						<view class="table_content" v-for="item in Object.keys(chartObj)" :key="item">
							<view class="table_content_type">
								<view class="table_content_type_bar">{{item}}</view>
							</view>
							<view class="table_data">
								<text>{{chartObj[item].num180 || 0}}</text>
								<text>{{chartObj[item].num30 || 0}}</text>
								<text>{{chartObj[item].num7 || 0}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 消息通知组件 -->
			<!-- <websockets  :noticeLength.sync='noticeLength' style="margin-top: 170rpx;" /> -->
			<view class="main_content main_task" :style="{marginTop:noticeLength?'30rpx':'180rpx'}">
				<view class="title">
					<text class="title_left">今日任务</text>
					<!-- <text class="title_right">近期安排</text> -->
				</view>
				<view class="mission">
					<view class="mission_content" @click="toStayAssign">
						<view class="mission_top">
							<u-badge type="error" v-if="list_top['todoAssign']" :count="list_top['todoAssign']" :offset="[20,-10]"></u-badge>
							<image class="mission_ico" src="../../../static/images/index_mission_ico_1.png" />
							<view class="mission_text">待分配</view>
						</view>
						
					</view>
				<!-- 	<view class="mission_content">
						<view class="mission_top">
							<view class="mission_num">0</view>
							<image class="mission_ico" src="../../../static/images/index_mission_ico_10.png" />
							<view class="mission_text">战败审批</view>
						</view>
						
					</view>
					<view class="mission_content" style="border-right: none;">
						<view class="mission_top">
							<view class="mission_num">0</view>
							<image class="mission_ico" src="../../../static/images/index_mission_ico_11.png" />
							<view class="mission_text">退单审批</view>
						</view>
						
					</view> -->
					<view class="clear"></view>
				</view>
			</view>
			<view class="main_content" style="margin-top: 24rpx;">
				<view class="title">
					<text class="title_left">活动有礼</text>
					<text class="title_right" @click="moreAct">更多活动</text>
				</view>
				<block  v-if="activities.length">
					<view class="active" v-for="(items,idx) in activities" :key="idx" @click="goDetails(items)">
						<view class="actType">
							<image  :src="items.operationImg1" />
							<text :class="items.activityDivision=='商城活动'?'shopType':''">{{items.activityDivision}}/{{items.activityType}}</text>
						</view>
						<text>{{items.activityName}}</text>
					</view>
				</block>
				<view class="nodata" v-else>
					<image src="../../../static/images/nohistory.png"></image>
					<view>目前没有活动</view>
				</view>
			</view>
			<view class="nav_block"></view>
		</tabbar>
	</view>
</template>

<script>
	import {
		indexTable,
		getAppIndexActivities,
		getSalesManagerOverviewByDept
	} from "@/service/api/api";
	import tabbar from "@/components/tabbar/tabbar.vue";
	import websockets from "../components/websockets.vue"
	export default {
		components: {
			tabbar,websockets
		},
		data() {
			return {
				role_show: 0,
				user_info: {},
				activities:[],//活动数据
				list_top: {},
				chartObj: {},
				noticeLength:0,
			}
		},
		onLoad() {
			this.user_info = uni.getStorageSync('user_info')
			// console.log(this.user_info)
		},
		onShow() {
			this.init()
		},
		methods: {
			init() {
				this.get_list_top()
				this.getChart()
				this.getAppIndexActivitiesFun()
			},
			change_role(role) {
				this.user_info['role'] = role
				uni.setStorageSync('user_info', this.user_info)
				if (role == '148') {
					uni.reLaunch({
						url: '/pages/home/manager/index'
					})
				} else {
					uni.reLaunch({
						url: '/pages/home/adviser/index'
					})
				}
			},
			role_status() {
				this.role_show = this.role_show == 1 ? 2 : 1
			},
			get_list_top() {
				let obj = {}
				obj['deptId'] = this.user_info['userDeptId']
				obj['userId'] = this.user_info['userId']
				obj['roleType'] = this.user_info['role']
				indexTable(obj).then((res) => {
					if (res.data.code == 0) {
						this.list_top = res.data.data
					} else {
						uni.showToast({
							title: res.data.errMsg,
							icon: 'none'
						})
					}
				})
			},
			getChart(){
				getSalesManagerOverviewByDept({
					deptId: this.user_info.userDeptId || ''
				}).then(res => {
					let arrObj = {
						C: {},
						B: {},
						A: {},
						H: {},
						O: {},
					}
					if (res.data.code == 0) {
						let reportIntentionLevels = res.data.data.reportIntentionLevels || []
						
						
						reportIntentionLevels.forEach((v, i) => {
							if(Object.keys(arrObj).indexOf(v.intentionLevel) == -1) {
								arrObj[v.intentionLevel] = {}
							}
							switch ((v.archivingCycle).toString()) {
								case '180':
									arrObj[v.intentionLevel].num180 = v.clueCount || 0;
									break;
								case '30':
									arrObj[v.intentionLevel].num30 = v.clueCount || 0;
									break;
								case '7':
									arrObj[v.intentionLevel].num7 = v.clueCount || 0;
									break;
							}
						})
						// console.log(arrObj)
					} else {
						uni.showToast({
							title: res.data.errMsg,
							icon: 'none'
						})
					}
					this.chartObj = arrObj
				})
			},
			async getAppIndexActivitiesFun(){
				let data={
					dealerId: this.user_info.dealerId || '',
					userDeptId: this.user_info.userDeptId || '',
					pageSize:3,
					pageNum:1
				}
				let res=await getAppIndexActivities(data)
				if(res.data.code==0){
					this.activities=res.data.data.list
					
				}
			},
			moreAct() {
				uni.navigateTo({
					// url: '/pages/activity/manager/activityList/index'
					url: '/pages/activity/adviser/activityList/index'
				})
			},
			toStayAssign(){
				uni.navigateTo({
					url: '/pages/clue/manager/stayAssign/index'
				})
			},
			toForm(){
				uni.reLaunch({
					url: `/pages/reportForm/manager/index`
				});
			},
			goDetails(item) {
				uni.navigateTo({
					url: `/pages/activity/details/index?activityId=${item.activityId}`
				})
			},
		}
	}
</script>
<style>
	page{
		background-color: #F5F6FA;
	}
</style>
<style lang="scss" scoped>
	.triangle {
		width: 0px;
		height: 0px;
		border-top: 11rpx solid transparent;
		border-bottom: 11rpx solid rgba(0, 0, 0, 0.8);
		border-left: 7rpx solid transparent;
		border-right: 7rpx solid transparent;
		margin-left: 80rpx;
	}

	.active {
		margin: 0 30rpx;
		border-bottom: 1px solid #EEE;
		margin-bottom: 20rpx;
	}
	.active:last-child{
		border-bottom: 0;
	}
	.active text {
		display: block;
		color: #43425D;
		font-size: 28rpx;
		padding: 20rpx 0;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		font-weight: 400;
	}
	.actType{
		position: relative;
		text{
			position: absolute;
			right: 0;
			bottom: 0;
			padding: 8rpx 14rpx;
			font-size: 20rpx;
			color: #fff;
			background: #FC950A;
			border-radius: 0 0 8rpx 0;
		}
	}
	.shopType{
		background:#F74E4E ;
	}
	.active image {
		width: 630rpx;
		height: 200rpx;
		border-radius: 8rpx;
	}
	.nodata{
		text-align: center;
		padding: 38rpx 0;
		image{
			width:280rpx;
			height: 280rpx;
		}
		view{
			color:#43425D;
			opacity: 0.6;
			margin-top: 24rpx;
			font-size: 28rpx;
		}
		
	}
	.mission{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}
	.mission_top {
		width: 96rpx;
		color: #43425D;
		
		padding-top: 28rpx;
		position: relative;
		text-align: center;
	}

	.mission_text {
		color: #43425D;
		font-weight: 400;
		font-size: 24rpx;
		line-height: 24rpx;
		padding: 27rpx 0;
	}

	.mission_num {
		font-size: 52rpx;
		line-height: 52rpx;
		padding-left: 30rpx;
		box-sizing: border-box;
		width: 150rpx;
		font-weight: bold;
	}

	.mission_ico {
		width: 72rpx;
		height: 72rpx;
	}
	
	.mission_content {
		width: 33.33%;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
	}
	.u-badge--bg--error{
		background-color:#FC6969
	}

	.main_content {
		border-radius: 10rpx;
		background: #fff;
		margin: 20rpx 30rpx 0 30rpx;
	}
    .main_task{
		margin-top: 210rpx;
	}
	.title {
		display: flex;
		color: #43425D;
		line-height: 94rpx;
		height: 94rpx;
	}

	.title_left {
		width: 50%;
		padding-left: 30rpx;
		text-align: left;
		font-size: 32rpx;
	}

	.title_right {
		font-size: 26rpx;
		width: 50%;
		text-align: right;
		margin-right: 30rpx;
	}

	.message_title {
		font-size: 28rpx;
		font-weight: 500;
	}

	.message_more {
		color: #3B86FF;
	}

	.message_line {
		opacity: 0.7;
		margin: 0 7rpx;
	}
	.main_task{
		margin-top: 170rpx;
	}
	.message_text {
		opacity: 0.7;
	}

	.message {
		width: 690rpx;
		height: 80rpx;
		background: #FBFBFB;
		box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
		margin: 0 30rpx;
		margin-top: -40rpx;
		line-height: 80rpx;
		display: flex;
		font-size: 26rpx;
		color: #43425D;
	}

	.message_content {
		color: #43425D;
		padding-left: 8rpx;
		padding-right: 8rpx;
	}

	.message_text {
		color: #43425D;
	}

	.message image {
		width: 30rpx;
		height: 30rpx;
		margin-top: 25rpx;
		margin-left: 20rpx;
	}

	.table {
		padding: 30rpx 26rpx;
		color: #43425d;
		padding-bottom: 40rpx;
		background: white;
		border-radius: 10rpx;
		margin-top: 20rpx;
		box-shadow: 0px 6px 12px rgba(53, 53, 64, 0.1);
		.clue_title{
			font-size:32rpx;
			color: #43425D;
			font-weight: 500;
		}
		.table_day {
			padding-left: 350rpx;
			vertical-align: top;
			display: flex;
			color:rgb(145,145,160)
		}
		
		.table_data {
			width: 345rpx;
			display: flex;
		}
		
		.table_day text,
		.table_data text {
			height: 40rpx;
			line-height: 40rpx;
			font-size: 20rpx;
			width: 115rpx;
			text-align: center;
		}
		.table_content {
			display: flex;
			justify-content: space-between;
			background: rgb(252,228,228);
			border-radius: 20rpx;
			margin-top: 10rpx;
			
			.table_content_type {
				vertical-align: top;
				height: 40rpx;
				line-height: 40rpx;
				width: 160rpx;
				
				text-indent: 14rpx;
				border-radius: 20rpx;
				font-size: 24rpx;
				font-weight: bold;
			}
			
			.table_content_type_bar {
				background: linear-gradient(90deg, #F0F4FC 0%, #FF5757 100%);
				border-radius: 20rpx;
				color: #E26131;
				height: 40rpx;
				line-height: 40rpx;
			}
			
			&:nth-child(2) {	
				margin-top: 16rpx !important;
			}
			
			&:nth-child(3) {
				background: rgb(229,238,252);
				.table_content_type {
					width: 320rpx !important;
				}
				.table_content_type_bar {
					color: #5A92DB;
					background: linear-gradient(90deg, #F0F4FC 0%, #5D9BFF 100%);
				}
			}
			
			&:nth-child(4) {
				background: rgb(229,246,250);
				.table_content_type {
					width: 280rpx;
				}
				.table_content_type_bar {
					color: #75B9CC;
					background: linear-gradient(90deg, #F0FCFB 0%, #3CB3D0 100%);
				}
			}
			
			&:nth-child(5) {
				background: rgb(233,247,243);
				.table_content_type {
					width: 240rpx;
				}
				.table_content_type_bar {
					color: #69C893;
					background: linear-gradient(90deg, #F0F4FC 0%, #7CDEBC 100%);
				}
			}
				
			&:nth-child(6) {	
				background: rgb(251,246,229);
				.table_content_type {
					width: 200rpx;
				}
				.table_content_type_bar {
					color: #D8AA2B;
					background: linear-gradient(90deg, #F0F4FC 0%, #F5D568 100%);
				}
			}
		}
	}
	.top_main {
		padding: 0 30rpx;
	}

	.top_name {
		color: #fff;
		font-size: 32rpx;
		line-height: 32rpx;
		height: 32rpx;
		float: left;
		font-weight: bold;
	}

	.top_role {
		/* width: 132rpx; */
		height: 48rpx;
		line-height: 48rpx;
		background: #fff;
		float: right;
		font-size: 24rpx;
		color: #43425D;
		border-radius: 24rpx;
		padding: 0 20rpx;
		position: relative;
		box-sizing: border-box;
		text-align: center;
	}

	.top_role image {
		width: 22rpx;
		height: 22rpx;
		margin-top: 14rpx;
		margin-left: 8rpx;
	}

	.top_menu {
		box-sizing: border-box;
		position: absolute;
		color: #fff;
		width: 132rpx;
		height: 132rpx;
		text-align: center;
		top: 37rpx;
		left: 0;
		z-index: 100;
	}

	.top_menu_bg {
		background: rgba(0, 0, 0, 0.8);
		border-radius: 8rpx;
	}

	.top_menu_text {
		height: 62rpx;
		line-height: 62rpx;
		text-align: center;
		font-size: 24rpx;
		margin: 0 10rpx;
	}

	.top {
		background: url(../../../static/images/index_bg.png);
		background-size: cover;
		padding-top: 88rpx;
		height: 410rpx;
	}
</style>
